<template>
  <div class="account">
    <div class="top-filter flex-between mb24">
      <div class="strong fs16 mrSemiBold flex-center" style="color: #110000">
        <div class="outer">
          <div class="inner"></div>
        </div>
        Login Record
      </div>
    </div>
    <div class="mb20">
      <a-select
        v-model="filter.role"
        style="width: 14vw;"
        v-decorator="['roleCode']"
      >
        <a-select-option
          v-for="(item, index) in roleList"
          :key="index"
          :value="item.key"
        >
          {{ item.value }}
        </a-select-option>
      </a-select>

      <a-select
        v-model="filter.status"
        style="width: 14vw;"
        class="ml10"
        v-decorator="['roleCode']"
      >
        <a-select-option
          v-for="(item, index) in statusList"
          :key="index"
          :value="item.key"
        >
          {{ item.value }}
        </a-select-option>
      </a-select>

      <a-input-search
        style="width: 14vw;"
        v-model="filter.keyword"
        ref="userNameInput"
        placeholder="模糊搜索用户名或IP地址"
        enter-button
        class="ml10"
        @search="onSearch"
      />
    </div>

    <a-table
      :columns="columns"
      :rowClassName="addClassName"
      :data-source="tableData"
      :pagination="pagination"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="modify(record)">编辑</a>
      </span>
      <span slot="auth" slot-scope="text, record">
        <a @click="showAuth(record)">查看</a>
      </span>
    </a-table>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "Account",
  i18n: require("./i18n"),
  data() {
    return {
      code: "argon-dashboard-vmsk32",
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          sorter: true,
        },
        {
          title: "用户名",
          dataIndex: "username",
          sorter: true,
        },
        {
          title: "角色标识",
          dataIndex: "role",
          sorter: true,
        },
        {
          title: "IP地址",
          dataIndex: "ip",
          sorter: true,
        },
        {
          title: "登录状态",
          dataIndex: "status",
          sorter: true,
        },
        {
          title: "登录时间",
          dataIndex: "loginTime",
          sorter: true,
        },
      ],
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showTotal: (total) => `Total ${total} items`,
      },
      visible: false,
      title: "",
      form: this.$form.createForm(this, { name: "coordinated" }),
      currentRole: {},
      filter: {
        role: "all",
        status: "all",
      },
      roleList: [
        {
          key: "all",
          value: "所有角色",
        },
        {
          key: "staff",
          value: "员工",
        },
        {
          key: "user",
          value: "用户",
        },
      ],
      statusList: [
        {
          key: "all",
          value: "所有状态",
        },
        {
          key: "1",
          value: "成功",
        },
        {
          key: "0",
          value: "失败",
        },
      ],
    };
  },
  methods: {
    addClassName: (record, index) => {
      let rowClassName = "default";
      if (index % 2 === 0) {
        rowClassName = "primary";
      }
      return rowClassName;
    },
    addRole() {
      this.title = "新建";
      this.visible = true;
      this.$nextTick(() => {
        this.form.resetFields();
      });
      setTimeout(() => {
        this.form.resetFields();
        this.form.setFieldsValue({
          pwd: "",
          pwdCheck: "",
        });
      });
    },
    modify(val) {
      this.currentRole = val;
      this.title = "编辑";
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          roleCodeModify: val.roleCode,
          roleName: val.roleName,
          username: val.username,
          id: val.id,
          pwd: val.pwd,
          pwdCheck: val.pwd,
          ip: val.ip,
          createTime: val.createTime,
        });
      });
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          // 两次密码不一致
          if (values.pwd != values.pwdCheck) {
            this.$message.error("The two passwords are inconsistent");
            return;
          }
          // 处理角色数据
          values.roleName = this.roleList.find(
            (v) => v.key === values.roleCode
          ).value;
          this.tableData.push({
            ...values,
            createTime: moment().format("YYYY-MM-DD HH:mm:ss"),
            id: (Math.random() * 100).toFixed(0),
          });
          this.$message.success("Add successfully");
          this.visible = false;
          this.pagination.total = this.tableData.length;
        }
      });
    },
    handleCancel() {
      this.visible = false;
    },
    showAuth() {},
  },
};
</script>

<style lang="less" scoped>
.account {
  width: 100%;
  min-height: 88vh;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
}
</style>
